<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Movie Manager</title>
        <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
        <%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/effects.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>
        <%= javascript_include_tag "ext/ext-all-debug.js" %>
        <%= javascript_include_tag "ext/build/locale/ext-lang-zh_CN.js" %>
        <script type="text/javascript">
            //            Ext.onReady(function(){
            //                Ext.MessageBox.alert('警告', '你好，你现在的操作有误，有稍后再试.');
            //            });
        </script>
    </head>
    <body>
        <input type=button value='Hidden' onclick='hGrid()'/>
        <div id="grid" style="height:370px;">
        </div>
        <script type="text/javascript">
        	var grid;
            Ext.onReady(function(){
                var sm = Ext.create('Ext.selection.CheckboxModel');
                
                var cm = Ext.create('Ext.grid.column.Column',[Ext.create('Ext.grid.RowNumberer'), sm, {
                    header: '编号',
                    dataIndex: 'id',
                    sortable: true
                }, {
                    header: '性别',
                    dataIndex: 'sex',
                    renderer: renderSex
                }, {
                    header: '名称',
                    dataIndex: 'name',
                    sortable: true
                }, {
                    header: '描述',
                    dataIndex: 'descn',
                    renderer: renderDescn,
                    sortable: true
                }]);
                
                function renderSex(value){
                    if (value == 'male') {
                        return "<span style='color:red;font-weight:bold;'>男</span><img src='/images/male.gif' />";
                    }
                    else {
                        return "<span style='color:green;font-weight:bold;'>女</span><img src='/images/female.gif' />";
                    }
                }
                
                function renderDescn(value, cellmeta, record, index, columnIndex, store){
                    var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
                    "这个单元格的值是：" +
                    value +
                    "\\n" +
                    "这个单元格的配置是：{cellId:" +
                    cellmeta.cellId +
                    ",id:" +
                    cellmeta.id +
                    ",css:" +
                    cellmeta.css +
                    "}\\n" +
                    "这个单元格对应行的record是：" +
                    record +
                    "，一行的数据都在里边\\n" +
                    "这是第" +
                    index +
                    "行\\n" +
                    "这是第" +
                    columnIndex +
                    "列\\n" +
                    "这个表格对应的Ext.data.Store在这里：" +
                    store +
                    "，随便用吧。" +
                    "\")'>";
                    return str;
                }
                
                
                var data = [['1', 'male', 'name1', 'descn1'], ['2', 'female', 'name2', 'descn2'], ['3', 'male', 'name3', 'descn3'], ['4', 'female', 'name4', 'descn4'], ['5', 'male', 'name5', 'descn5'], ['6', 'male', 'name6', 'descn6'], ['7', 'male', 'name7', 'descn7'], ['8', 'male', 'name8', 'descn8'], ['9', 'male', 'name9', 'descn9'], ['10', 'male', 'name10', 'descn10'], ['11', 'male', 'name11', 'descn11'], ['12', 'male', 'name12', 'descn12']];
                
                var ds = Ext.create('Ext.data.Store', {
                    proxy: new Ext.data.MemoryProxy(data),
                    reader: new Ext.data.ArrayReader({}, [{
                        name: 'id'
                    }, {
                        name: 'sex'
                    }, {
                        name: 'name'
                    }, {
                        name: 'descn'
                    }])
                });
                
                grid = Ext.create('Ext.grid.Panel', {
                    el: 'grid',
                    store: ds,
                    columns : cm,
                    autoWidth: true,
                    iconCls: 'icon-grid',
                    collapsible: true,
                    animCollapse: false,
                    autoWidth: true,
                    frame: true,
                    title: '客户列表',
                    bbar: Ext.create('Ext.toolbar.Paging', {
                        pageSize: 10,
                        store: ds,
                        displayInfo: true,
                        displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
                        emptyMsg: "没有记录"
                    })
                });
                grid.render();
                ds.load();
                //            ds.load({
                //                params: {
                //                    start: 0,
                //                    limit: 10
                //                }
                //            });
            });
			function hGrid(){
				alert('OK');
				grid.setVisible(false);
			}
        </script>
    </body>
</html>
